﻿@model Authentication.Model.ViewModel.SaleOut.BalanceViewModel
<div class="row-fluid">
    <div class="box span12">
        <div class="box-header" data-original-title>
            <h2><i class="halflings-icon user"></i><span class="break"></span>Information Detail</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>
        <div class="box-content">
            @using (Html.BeginForm("IncentiveClosed", "Incentive", FormMethod.Post, new { @class = "form-horizontal", name = "Search", id = "Search" }))
            {
                <fieldset>

                    <div class="control-group">
                        @Html.LabelFor(m => m.FromDate, "Period", new { @class = "control-label" })
                        <div class="controls">
                            @Html.TextBoxFor(m => m.FromDate, new { @class = "input-xlarge datepicker", value = Request["FromDate"] })
                            @Html.TextBoxFor(m => m.ToDate, new { @class = "input-xlarge datepicker", value = Request["ToDate"] })
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="selectError3">Option</label>
                        <div class="controls">
                            <select id="selectbs">
                                <option selected="selected" value="Summary">Summary</option>
                                <option value="Detail">Detail</option>
                                <option value="More">More...</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" name="btnSearch" id="btnSearch" class="btn btn-primary">Search</button>
                        <button class="btn">Export</button>
                    </div>
                </fieldset>
            }

        </div>
        <div class="box-content">
            <table class="table table-striped table-bordered bootstrap-datatable datatable" id="dataTables-1">
                <thead>
                    <tr>
                        <th>Region</th>
                        <th>Province</th>
                        <th>Cust Code</th>
                        <th>Cust Name</th>
                        <th>Address</th>
                        <th>Bill Code</th>
                        <th>Bill name</th>
                        <th>Qty</th>
                        <th>INCT_AMT</th>
                        <th>SCHEME</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th>Region</th>
                        <th>Province</th>
                        <th>Cust Code</th>
                        <th>Cust Name</th>
                        <th>Address</th>
                        <th>Bill Code</th>
                        <th>Bill name</th>
                        <th>Qty</th>
                        <th>INCT_AMT</th>
                        <th>SCHEME</th>
                    </tr>
                </tfoot>
            </table>
            <table class="table table-striped table-bordered bootstrap-datatable datatable" id="dataTables-2">
                <thead>
                    <tr>
                        <th>Region</th>
                        <th>Province</th>
                        <th>Shop Code</th>
                        <th>Shop Name</th>
                        <th>Address</th>
                        <th>Bill Code</th>
                        <th>Bill name</th>
                        <th>Product</th>
                        <th>Model</th>
                        <th>Qty</th>
                        <th>Wt Amt</th>
                        <th>INCT_AMT</th>
                        <th>SCHEME</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th>Region</th>
                        <th>Province</th>
                        <th>Shop Code</th>
                        <th>Shop Name</th>
                        <th>Address</th>
                        <th>Bill Code</th>
                        <th>Bill name</th>
                        <th>Product</th>
                        <th>Model</th>
                        <th>Qty</th>
                        <th>Wt Amt</th>
                        <th>INCT_AMT</th>
                        <th>SCHEME</th>
                    </tr>
                </tfoot>
            </table>
            <table class="table table-striped table-bordered bootstrap-datatable datatable" id="dataTables-3">
                <thead>
                    <tr>
                        <th>Region</th>
                        <th>Province</th>
                        <th>Shop Code</th>
                        <th>Shop Name</th>
                        <th>Bill Code</th>
                        <th>Bill name</th>
                        <th>Product</th>
                        <th>Model</th>
                        <th>Serial No</th>
                        <th>INCT_AMT</th>
                        <th>Msg Body</th>
                        <th>SCHEME</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th>Region</th>
                        <th>Province</th>
                        <th>Shop Code</th>
                        <th>Shop Name</th>
                        <th>Bill Code</th>
                        <th>Bill name</th>
                        <th>Product</th>
                        <th>Model</th>
                        <th>Serial No</th>
                        <th>INCT_AMT</th>
                        <th>Msg Body</th>
                        <th>SCHEME</th>
                    </tr>
                </tfoot>
            </table>

        </div>
    </div>
    <!--/span-->
</div>


@section scripts
{
    @if (true)
    {
        <script>
            $(function () {
                $('#selectbs').change(function () {
                    var value = $(this).val();
                    SetTableData(value);
                });
            });
            $(document).ready(function () {
                var val = $('#selectbs').val();
                SetTableData(val);
            });


            function SetTableData(valueSelected) {
                if (valueSelected == 'Summary') {
                    $('#dataTables-1').show();
                    $('#dataTables-2').hide();
                    $('#dataTables-3').hide();
                    var table = $('#dataTables-1').dataTable({
                        "bServerSide": true,
                        "bProcessing": true,
                        "responsive": true,
                        oLanguage: {
                            sProcessing: "<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'/>"
                        },
                        "bAutoWidth": false,
                        "aLengthMenu": [10, 30, 50, 100],
                        "pageLength": 30,
                        "sAjaxSource": '@Url.Action("IncentiveClosedData")' + '?fromDate=' + $('#FromDate').val() + '&toDate=' + $('#ToDate').val() + '&dropBillShop=' + valueSelected,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "POST",
                                "url": sSource,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                        "sPaginationType": "bootstrap",//"full_numbers",
                        "aoColumns": [
                                    { "sName": "Region", "bSortable": false },
                                    { "sName": "Province", "bSortable": false },
                                    { "sName": "Custcode", "bSortable": false },
                                    { "sName": "Custname", "bSortable": false },
                                    { "sName": "Address", "bSortable": false },
                                    { "sName": "Billto", "bSortable": false },
                                    { "sName": "Billname", "bSortable": false },
                                    { "sName": "Qty", "bSortable": false },
                                    { "sName": "Inctamt", "bSortable": false },
                                    { "sName": "Scheme", "bSortable": false }]
                    });
                }
                if (valueSelected == 'Detail') {
                    $('#dataTables-1').hide();
                    $('#dataTables-2').show();
                    $('#dataTables-3').hide();
                    var table = $('#dataTables-2').dataTable({
                        "bServerSide": true,
                        "bProcessing": true,
                        "responsive": true,
                        oLanguage: {
                            sProcessing: "<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'/>"
                        },
                        "bAutoWidth": false,
                        "aLengthMenu": [10, 30, 50, 100],
                        "pageLength": 30,
                        "sAjaxSource": '@Url.Action("IncentiveClosedData")' + '?fromDate=' + $('#FromDate').val() + '&toDate=' + $('#ToDate').val() + '&dropBillShop=' + valueSelected,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "POST",
                                "url": sSource,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                        "sPaginationType": "bootstrap",//"full_numbers",
                        "aoColumns": [
                                    { "sName": "Region", "bSortable": false },
                                    { "sName": "Province", "bSortable": false },
                                    { "sName": "Shopcode", "bSortable": false },
                                    { "sName": "Shopname", "bSortable": false },
                                    { "sName": "Address", "bSortable": false },
                                    { "sName": "Billto", "bSortable": false },
                                    { "sName": "Billname", "bSortable": false },
                                    { "sName": "Product", "bSortable": false },
                                    { "sName": "Model", "bSortable": false },
                                    { "sName": "Qty", "bSortable": false },
                                    { "sName": "Wtamt", "bSortable": false },
                                    { "sName": "Inctamt", "bSortable": false },
                                    { "sName": "Scheme", "bSortable": false }]
                    });
                }
                if (valueSelected == 'More') {
                    $('#dataTables-1').hide();
                    $('#dataTables-2').hide();
                    $('#dataTables-3').show();
                    var table = $('#dataTables-3').dataTable({
                        "bServerSide": true,
                        "bProcessing": true,
                        "responsive": true,
                        oLanguage: {
                            sProcessing: "<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'/>"
                        },
                        "bAutoWidth": false,
                        "aLengthMenu": [10, 30, 50, 100],
                        "pageLength": 30,
                        "sAjaxSource": '@Url.Action("IncentiveClosedData")' + '?fromDate=' + $('#FromDate').val() + '&toDate=' + $('#ToDate').val() + '&dropBillShop=' + valueSelected,
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            $.ajax({
                                "dataType": 'json',
                                "type": "POST",
                                "url": sSource,
                                "data": aoData,
                                "success": fnCallback
                            });
                        },
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                        "sPaginationType": "bootstrap",//"full_numbers",
                        "aoColumns": [
                                    { "sName": "Region", "bSortable": false },
                                    { "sName": "Province", "bSortable": false },
                                    { "sName": "Shopcode", "bSortable": false },
                                    { "sName": "Shopname", "bSortable": false },
                                    { "sName": "Billto", "bSortable": false },
                                    { "sName": "Billname", "bSortable": false },
                                    { "sName": "Product", "bSortable": false },
                                    { "sName": "Model", "bSortable": false },
                                    { "sName": "SerialNo", "bSortable": false },
                                    { "sName": "Inctamt", "bSortable": false },
                                    { "sName": "Msgbody", "bSortable": false },
                                    { "sName": "Scheme", "bSortable": false }]
                    });
                }
            }
        </script>
    }
}